<!--
 * @Author: Li Zengkun
 * @Date: 2022-08-12 16:46:00
 * @LastEditors: Li Zengkun
 * @LastEditTime: 2022-08-15 17:30:32
 * @Description: prodect-details-page
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/style.css">

    <link rel="stylesheet" href="../node_modules/font-awesome/css/font-awesome.min.css">
    <title>prodect-details</title>
</head>

<body>
    <header>
        <a id="return" href="javascript:history.back()">
            <img src="../img/右箭头.png" alt="">
        </a>
        <div id="head-btn-box" class="btn-box">
            <span id="to-top" class="active">商品</span>
            <span id="to-detail">详情</span>
        </div>
        <div class="">
            <a id="go-home" href="./index.html"><img src="../img/footer/首页1.png" alt=""></a>
            <a id="share"><img src="../img/user/转发1.png" alt=""></a>
        </div>
    </header>

    <div class="content-box">
        <!-- product-info -->
        <div class="product-info content-item">
            <div class="img-box">
                <img id="goods-img" src="../img/classify/ns (1).png" alt="">
            </div>
            <div class="text-content">
                <div class="info">
                    <div id="goods-name" class="title">全棉多用套键</div>
                    <div id="goods-hotpoint" class="subtitle">冬暖夏凉的凉被</div>
                    <div class="price">￥<span id="goods-price"></span> <span id="goods-market-price"></span></div>
                </div>
                <div class="evaluation">
                    <p class="num">469</p>
                    <p class="title">用户评价</p>
                    <span class="btn">查看</span>
                </div>
            </div>
        </div>
        <!-- select -->
        <div class="select content-item">
            <ul class="select-list">
                <li class="select-item">
                    <div class="title">规格数量选择 </div>
                    <i class="fa fa-chevron-right" aria-hidden="true"></i>
                </li>
                <li class="select-item">
                    <div class="title">1个促销: <span class="red">120款爆品3件8折</span></div>
                    <i class="fa fa-chevron-right" aria-hidden="true"></i>
                </li>
                <li class="select-item">
                    <div class="title">积分: <span>购买最高可得59积分</span></div>
                    <i class="fa fa-chevron-right" aria-hidden="true"></i>
                </li>
                <li class="select-item">
                    <div class="title">服务：
                        <span>30天无忧退换货</span>
                        <span>48小时快速退款</span>
                        <span>满38元免邮费</span>
                    </div>
                    <i class="fa fa-chevron-right" aria-hidden="true"></i>
                </li>
            </ul>
        </div>
        <!-- user-comment -->
        <div class="user-comment content-item">
            <div class="headline">
                <div>用户评价：(<span id="comment-num">111</span>)</div>
                <div><span id="applause-rate">99.1%</span> 好评
                    <i class="fa fa-chevron-right" aria-hidden="true"></i>
                </div>
            </div>
            <ul class="comment-list">
                <li class="comment-item">
                    <div class="head">
                        <img class="avatar" src="../img/user/avator.png" alt="">
                        <span id="comment-username">黄晓明</span>
                        <span id="grade">lv.1</span>
                        <span id="star" style="color: #fab646;">
                            <i class="fa fa-star" aria-hidden="true"></i>
                            <i class="fa fa-star" aria-hidden="true"></i>
                            <i class="fa fa-star" aria-hidden="true"></i>
                            <i class="fa fa-star-o" aria-hidden="true"></i>
                            <i class="fa fa-star-o" aria-hidden="true"></i>
                        </span>
                    </div>
                    <div class="subtitle">
                        <span class="date">2022.8.12 10:11</span>
                        <span class="type">灰色 紫色 1.8m</span>
                    </div>
                    <div class="comment-content">
                        <p class="text">质感相当不错，很舒服，本人很喜欢</p>
                        <div class="img-list">
                            <div class="img-box">
                                <img src="../img/classify/矩形 8.png" alt="">
                            </div>
                            <div class="img-box">
                                <img src="../img/classify/矩形 8.png" alt="">
                            </div>
                            <div class="img-box">
                                <img src="../img/classify/矩形 8.png" alt="">
                            </div>
                        </div>
                    </div>
                </li>
            </ul>

        </div>
        <!-- product-detail -->
        <div class="product-detail content-item">
            <div class="headline">商品详情</div>
            <div id="detail-content" class="detail"></div>
        </div>
    </div>


    <footer>
        <div id="customer-service-btn" class="icon">
            <img src="../img/detail/wang.svg" alt="">
        </div>
        <div id="cart-btn" class="icon">
            <img src="../img/detail/cart.svg" alt="">
        </div>
        <div id="collection-btn" class="icon">
        </div>
        <div id="add-cart-btn" class="add-cart-btn">加入购物车</div>
        <div id="buy-btn" class="buy-btn">立即购买</div>
    </footer>


    <!-- shadow -->
    <div class="shadow"></div>

    <!-- select-pop -->
    <div id="pop-window" class="select-pop ">
        <span class="close">
            <i  id="close-pop" class="fa fa-times" aria-hidden="true"></i>
        </span>
        <div class="head">
            <img id="pop-goods-img" src="../img/classify/ns (1).png" alt="">
            <div class="head-content">
                <div class="price">价格：￥<span id="pop-goods-price">11</span></div>
                <div>请选择规格属性</div>
            </div>
        </div>
        <div class="pop-middle">
            <div id="color" class="title">
                <p>颜色</p>
                <ul id="color-list" class="list">
                    <li class="active">默认</li>
                    <li>默认</li>
                    <li>默认</li>
                    <li>默认</li>
                    <li>默认</li>
                    <li>默认</li>
                    <li>默认</li>
                </ul>
            </div>
            <div id="size" class="title">
                <p>尺寸</p>
                <ul id="size-list" class="list">
                    <li class="active">默认</li>
                </ul>
            </div>
            <div id="quantity" class="title">
                <p>数量</p>
                <div class="btn-box">
                    <span id="reduce-btn">-</span>
                    <input id="quantity-num" disabled value="1" type="number">
                    <span id="plus-btn">+</span>
                </div>
            </div>
        </div>

        <div id="pop-add-cart-btn" class="determine-btn">
            加入购物车
        </div>
        <div id="pop-buy-btn" class="determine-btn">
            立即购买
        </div>
    </div>

    <!-- 提示 tip -->
    <span id="tip" class="tip"></span>

</body>
<script src="../js/axios.min.js"></script>
<script src="../js/axios_config.js"></script>
<script src="../js/api.js"></script>
<script>
    let oContentBox = document.querySelector('.content-box')
    let oGoodsImg = document.querySelector('#goods-img')
    let oGoodsName = document.querySelector('#goods-name')
    let oGoodsHotpoint = document.querySelector('#goods-hotpoint')
    let oGoodsPrice = document.querySelector('#goods-price')
    let oGoodsMarketPrice = document.querySelector('#goods-market-price')
    let oGoodsDetailContent = document.querySelector('#detail-content')
    let oHeadBtnBox = document.querySelector('#head-btn-box')
    let oToTop = document.querySelector('#to-top')
    let oToDetail = document.querySelector('#to-detail')
    let oCustomerServiceBtn = document.querySelector('#customer-service-btn')
    let oCartBtn = document.querySelector('#cart-btn')
    let oCollectionBtn = document.querySelector('#collection-btn')
    let oAddCartBtn = document.querySelector('#add-cart-btn')
    let oBuyBtn = document.querySelector('#buy-btn')
        // let oTip = document.querySelector('#tip')
    let oPopWindow = document.querySelector('#pop-window')
    let oShadow = document.querySelector('.shadow')
    let oPopAddCartBtn = document.querySelector('#pop-add-cart-btn')
    let oPopBuyBtn = document.querySelector('#pop-buy-btn')
    let oPopGoodsImg = document.querySelector('#pop-goods-img')
    let oPopGoodsPrice = document.querySelector('#pop-goods-price')
    let oPopPlusBtn = document.querySelector('#plus-btn')
    let oPopQuantityNum = document.querySelector('#quantity-num')
    let oPopReduceBtn = document.querySelector('#reduce-btn')

    let goodsId = parseInt(getUrlParam("id"));
    let user = JSON.parse(localStorage.getItem('user'));
    let detail;

    init()

    /**
     * @description: 初始化
     * @return {*}
     */
    async function init() {
        // 获取 detail
        detail = await getDetail()
        isExistCart()
        console.log(detail);

        // 初始化 页面 detail 数据
        oGoodsImg.src = detail.img_md
        oGoodsName.innerText = detail.name
        oGoodsHotpoint.innerText = detail.hotPoint
        oGoodsPrice.innerText = detail.price
        oGoodsMarketPrice.innerText = "￥" + detail.marketPrice
        oGoodsDetailContent.innerHTML = detail.detail

        // 添加 slider 轮播 
        let sliderImgs = detail.slider.split(',')
        sliderImgs.forEach((img) => {
            let imgHTML = `<img src="${img}" alt="">`
            oGoodsImg.insertAdjacentHTML('afterend', imgHTML)
        })

        // 头部按钮点击事件
        oHeadBtnBox.addEventListener('click', (event) => {
            let top = 0
            if (event.target.id === 'to-detail') {
                top = oGoodsDetailContent.offsetTop
            }
            oContentBox.scrollTo({
                top: top,
                behavior: "smooth"
            })
        })

        // 是否收藏
        judgeIsCollected()

        // 是否已加入购物车
        if (await isExistCart()) {
            oCartBtn.querySelector('img').src = '../img/detail/cart_fill.svg'
        }

        // 点击进入购物车
        oCartBtn.addEventListener('click', () => {
            window.location.href = `./cart.html`
        })


        // 收藏事件
        oCollectionBtn.addEventListener('click', async() => {
            // 取消收藏
            if (detail.isCollected) {
                detail.isCollected = !await removeCollectGoods()
            }
            // 收藏
            else {
                detail.isCollected = await collectGoods()
            }
            judgeIsCollected()
        })

        // 立即购买 弹出pop
        oBuyBtn.addEventListener('click', () => {
            oPopGoodsImg.src = detail.img_md
            oPopGoodsPrice.innerText = detail.price
            oShadow.style.display = 'block'
            oPopWindow.style.transform = 'translateY(-100%)'
            oPopAddCartBtn.style.display = 'none'
            oPopBuyBtn.style.display = 'block'
        })

        // 加入购物车 弹出pop
        oAddCartBtn.addEventListener('click', () => {
            oPopGoodsImg.src = detail.img_md
            oPopGoodsPrice.innerText = detail.price
            oShadow.style.display = 'block'
            oPopWindow.style.transform = 'translateY(-100%)'
            oPopAddCartBtn.style.display = 'block'
            oPopBuyBtn.style.display = 'none'
        })


        // 弹窗 事件委托
        oPopWindow.addEventListener('click', (event) => {
            let id = event.target.id

            // 关闭
            if (id === 'close-pop') {
                oPopWindow.style.transform = 'translateY(0)'
                oShadow.style.animationName = 'shadowOut'
                setTimeout(() => {
                    oShadow.style.display = 'none'
                    oShadow.style.animationName = 'shadowIn'
                }, 500)
            }
            // 增加
            if (id === 'plus-btn') {
                console.log(oPopQuantityNum.innerText);
                oPopQuantityNum.value++
            }
            // 减少
            if (id === 'reduce-btn') {
                if (oPopQuantityNum.value <= 1) {
                    return
                }
                oPopQuantityNum.value--
            }
            // 加入购物车
            if (id === 'pop-add-cart-btn') {
                addCart()
            }
        })
    }


    /**
     * @description: 判断是否已加入购物车
     * @return {*} result (Boolean) 是否已加入购物车
     */
    async function isExistCart() {
        let result = false
        await axios.post('/cart/isExist', {
            gid: detail.id
        }).then((resp) => {
            console.log(resp);
            result = resp.data.isExist
        })
        return result
    }
    /**
     * @description: 将商品添加至购物车
     * @return {*}  result (Boolean) 是否成功加入购物车
     */
    async function addCart() {
        let result = false
        console.log(detail.id + "   " + oPopQuantityNum.value);
        await axios.post('/cart/add', {
            gid: detail.id,
            num: oPopQuantityNum.value
        }).then((resp) => {
            openTip(resp.msg)
            console.log(resp);
            result = resp.status
        })
        return result
    }

    /**
     * @description: 弹出提示框
     * @return {*}
     * @param {*} text (String) 提示内容
     */
    function openTip(text) {
        oTip.style.display = 'inline-block'
        oTip.innerText = text
        setTimeout(() => {
            oTip.style.display = 'none'
        }, 3000)
    }
    /**
     * @description: 判断商品是否被收藏
     * @return {*}
     */
    function judgeIsCollected() {
        if (detail.isCollected) {
            oCollectionBtn.innerHTML = `<img src="../img/detail/favor_fill.svg" alt="">`
        } else {
            oCollectionBtn.innerHTML = `<img src="../img/detail/favor.svg" alt="">`
        }
    }

    /**
     * @description: 收藏商品
     * @return {*}
     */
    async function collectGoods() {
        let result = false
        await axios.post('/collection/add', {
            id: detail.id,
        }).then((resp) => {
            openTip(resp.msg)
            if (resp.status) {
                result = true
                console.log(resp.msg);
            }
        })
        return result
    }

    /**
     * @description: 取消收藏商品
     * @return {*}
     */
    async function removeCollectGoods() {
        let result = false
        await axios.post('/collection/remove', {
            id: detail.id,
        }).then((resp) => {
            openTip(resp.msg)
            if (resp.status) {
                result = true
            }
        })
        return result
    }

    /**
     * @description: 获取商品详情
     * @return {*} data (object) 商品详情
     */
    async function getDetail() {
        let data = null
        await axios.get('/goods/detail', {
            params: {
                id: goodsId,
                uid: user.id,
            }
        }).then((resp) => {
            data = resp.data
        })
        return data
    }
</script>


<style>
    #goods-market-price {
        color: #999999;
        padding: 0 2vw;
        font-size: 3.5vw;
        text-decoration: line-through;
    }
    
    header .btn-box {
        position: absolute;
        left: 0;
        right: 0;
        margin: 0 auto;
        width: 37.33vw;
        height: 8vw;
        border-radius: 1.07vw;
        border: solid 0.13vw #c3c3c3;
        display: flex;
        justify-content: space-around;
        align-items: center;
        overflow: hidden;
    }
    
    header .btn-box>span {
        display: inline-block;
        font-size: 3.73vw;
        color: #555555;
        width: 50%;
    }
    
    header .btn-box>span.active {
        color: #fff;
        background-color: #7f7f7f;
    }
    
    header #go-home {
        margin-right: 1.5vw;
    }
    /* FOOTER */
    
    footer {
        position: fixed;
        width: 100vw;
        bottom: 0;
        z-index: 999;
        background-color: #fff;
        height: 13vw;
        display: flex;
        justify-content: space-between;
        border-top: 0.13vw solid #eaeaea;
    }
    
    footer div {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    footer .icon {
        width: 12.4vw;
        border-right: 0.13vw solid #eaeaea;
    }
    
    footer img {
        height: 5.07vw;
    }
    
    footer .add-cart-btn,
    footer .buy-btn {
        font-size: 3.73vw;
        font-weight: 500;
        width: 31.33vw;
        height: 100%;
        color: #fff;
        background-color: #c55a5c;
    }
    
    footer .add-cart-btn {
        background-color: #fff;
        color: #555555;
    }
    /* content-box */
    
    .content-box {
        height: calc(100vh - 26vw);
        background-color: #f4f4f4;
    }
    
    .content-item {
        background-color: #fff;
        margin-bottom: 2.67vw;
        box-sizing: border-box;
    }
    /* product-info */
    
    .product-info .img-box {
        width: 100vw;
        height: 100vw;
        overflow-y: hidden;
        overflow-x: auto;
        display: flex;
    }
    
    .product-info .img-box>img {
        width: 100vw;
        height: 100vw;
    }
    
    .product-info .text-content {
        padding: 3.33vw;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .product-info .text-content .info {
        width: 80%;
    }
    
    .product-info .text-content .info .title {
        font-size: 4.53vw;
        font-weight: bold;
        color: #555555;
    }
    
    .product-info .text-content .info .subtitle {
        font-size: 3.46vw;
        font-weight: bold;
        color: #999999;
        margin-top: 2.8vw;
    }
    
    .product-info .text-content .info .price {
        font-size: 5.33vw;
        margin-top: 3.8vw;
        color: #c55a5c;
    }
    
    .product-info .text-content .evaluation {
        width: 20%;
        text-align: center;
    }
    
    .product-info .text-content .evaluation .num {
        font-size: 4.8vw;
        font-weight: bold;
        color: #c55a5c;
    }
    
    .product-info .text-content .evaluation .title {
        margin-top: 2.4vw;
        font-size: 3.2vw;
        font-weight: bold;
        color: #c55a5c;
    }
    
    .product-info .text-content .evaluation .btn {
        display: inline-block;
        margin-top: 2.4vw;
        width: 12.8vw;
        height: 4.8vw;
        border-radius: 0.67vw;
        font-size: 3.2vw;
        font-weight: bold;
        color: #999999;
        border: solid 0.13vw #c3c3c3;
    }
    /* select */
    
    .red {
        color: #c55a5c;
    }
    
    .select .select-list>li {
        padding: 5.2vw 3.33vw;
        position: relative;
        border-bottom: 0.27vw solid #e8e8e8;
        display: flex;
        box-sizing: border-box;
        justify-content: space-between;
    }
    
    .select .select-list>li .title {
        font-size: 3.47vw;
        line-height: 3.47vw;
        color: #555555;
    }
    
    .select .select-list>li:last-child>.title>span {
        color: #999999;
    }
    /* user-comment */
    
    .user-comment {
        padding: 0 3.33vw;
    }
    
    .user-comment .headline {
        padding: 3.33vw 0;
        display: flex;
        justify-content: space-between;
        font-size: 3.2vw;
    }
    
    .user-comment .headline>div:first-child {
        font-size: 3.47vw;
        color: #555555;
    }
    
    .user-comment .comment-list>.comment-item {
        padding: 3.33vw 0;
        border-top: solid 0.4vw #e8e8e8;
    }
    
    .comment-item .head {
        vertical-align: middle;
        display: flex;
        align-items: center;
        gap: 2vw;
    }
    
    .comment-item .head .avatar {
        height: 9.33vw;
        width: 9.33vw;
        border-radius: 50%;
    }
    
    .comment-item .head #comment-username {
        color: #000;
    }
    
    .comment-item .subtitle {
        font-size: 2.93vw;
        margin-top: 2.8vw;
    }
    
    .comment-item .comment-content {
        margin-top: 4.4vw;
        font-size: 3.2vw;
        font-weight: bold;
        color: #555555;
    }
    
    .comment-item .comment-content .img-list {
        display: flex;
        flex-wrap: wrap;
        margin-top: 3.33vw;
        justify-content: space-between;
        align-items: center;
    }
    
    .comment-item .comment-content .img-list>.img-box {
        width: 29.33vw;
        height: 29.33vw;
        overflow: hidden;
        border-radius: 1.33vw;
        position: relative;
    }
    
    .comment-item .comment-content .img-list>.img-box>img {
        position: absolute;
        height: 100%;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
    }
    /* product-detail */
    
    .product-detail .headline {
        font-size: 4vw;
        text-align: center;
        padding: 3.33vw 0;
        font-weight: bold;
        color: #c55a5c;
        border-bottom: solid 0.4vw #e8e8e8;
    }
    /* select-pop */
    
    .shadow {
        height: 100vh;
        width: 100vw;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 999;
        position: fixed;
        top: 0;
        display: none;
        opacity: 0;
        animation: shadowIn .5s ease-out;
        animation-fill-mode: forwards;
        transition: all .5s ease-out;
    }
    
    @keyframes shadowIn {
        0% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }
    
    @keyframes shadowOut {
        0% {
            opacity: 1;
        }
        100% {
            opacity: 0;
        }
    }
    
    .select-pop {
        position: fixed;
        top: 100.1%;
        width: 100vw;
        background-color: #fff;
        z-index: 9999;
        box-sizing: border-box;
        padding: 3.33vw;
        /* display: none; */
        transform: translateY(0);
        transition: transform .5s ease-out;
    }
    /* .toUp {
        display: block;
        transform: translateY(0%);
        transition: transform .5s ease-out;
    } */
    
    .select-pop .close {
        position: absolute;
        right: 3.33vw;
        top: 3.33vw;
        font-size: 6vw;
    }
    
    .select-pop .head {
        display: flex;
        justify-content: left;
        align-items: flex-start;
    }
    
    .select-pop .head>img {
        height: 24vw;
        width: 24vw;
        border-radius: 1.07vw;
        overflow: hidden;
    }
    
    .select-pop .head .head-content {
        line-height: 12vw;
        padding-left: 3vw;
        color: #555555;
    }
    
    .select-pop .head .head-content .price {
        font-weight: 600;
        font-size: 5vw;
        color: #c55a5c;
    }
    
    .select-pop .pop-middle {
        height: 100vw;
        background: #fff;
        margin-bottom: 3.33vw;
        color: #555555;
    }
    
    .select-pop .pop-middle .title {
        border-top: 0.1vw solid #e8e8e8;
        padding: 3.33vw 0;
    }
    
    .select-pop .pop-middle .list {
        display: flex;
        flex-wrap: wrap;
        justify-content: left;
        gap: 3.33vw;
        padding-top: 3.33vw;
    }
    
    .select-pop .pop-middle .list>li {
        border-radius: 1.07vw;
        padding: 1.8vw 3.33vw;
        border: solid 0.27vw #d1d1d1;
    }
    
    .select-pop .pop-middle .list>li.active {
        background-color: #c55a5c;
        color: #fff;
        border-color: #c55a5c;
    }
    
    .select-pop .determine-btn {
        width: 100%;
        height: 9.2vw;
        background-color: #c55a5c;
        border-radius: 1.07vw;
        text-align: center;
        color: #fff;
        line-height: 9.2vw;
    }
    
    .select-pop #quantity {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 0;
    }
    
    .select-pop #quantity .btn-box {
        height: 9.2vw;
        border: 0.27vw solid #e8e8e8;
        line-height: 9.2vw;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        border-radius: 1.07vw;
        position: relative;
        overflow: hidden;
    }
    
    .select-pop #quantity .btn-box>span {
        display: inline-block;
        box-sizing: border-box;
        padding: 0;
        margin: 0;
        width: 10vw;
        text-align: center;
        height: 100%;
    }
    
    .select-pop #quantity .btn-box>span:active {
        background-color: #c55a5c;
        color: #fff;
    }
    
    .select-pop #quantity #quantity-num {
        width: 15vw;
        /* box-sizing: border-box; */
        text-align: center;
        border-top: none;
        border-bottom: none;
        border-left: 0.27vw solid #e8e8e8;
        border-right: 0.27vw solid #e8e8e8;
    }
</style>

</html>